<template>
  <div class="yxp-course">
    <div class="yxp-composition-top">
      <div class="back" @click="handleBack">
        <span></span>
      </div>
      <div class="yxp-top-c">训练报告</div>
      <div class="yxp-top-r"></div>
    </div>
    <div class="yxp-scene-main">
      <div class="main-box">
        <div class="main-box-content">
          <div class="content">
            <div class="content-wrap upload-box" >
              <h3 style="font-size: 28px;text-align: center;font-weight: 800;" class="work-title">【写作要求】</h3>
              <div class="work-info" style="padding: 20px;" v-html="detailInfo.require"></div>
            </div>
          </div>
        </div>
        <div class="main-box-content">
          <div class="content">
            <div class="arrow"></div>
            <div class="content-wrap detail-box">
                <div class="content-answer">
                  <h3 class="content-answer-title">
                    <img src="@/assets/composition/upload-star.png" />我的答案
                  </h3>
                  <div class="content-answer-main answer-img">
<!--                    <div class="audio-btn" v-if="playing" id="yxp-result-play" @click="handlePause(1)">-->
<!--                      <img src="@/assets/composition/read-pause-icon.png" />我的录音-->
<!--                    </div>-->
<!--                    <div class="audio-btn" v-if="!playing" id="yxp-result-play1">-->
<!--                      暂无数据-->
<!--                    </div>-->
<!--                    <div class="audio-img" v-if="detailInfo.pic !== null && detailInfo.pic !== ''">-->
<!--                      <img :src="detailInfo.pic" />-->
<!--                    </div>-->
                    <div class="audio-btn" v-if="!detailInfo.imageurl" id="yxp-result-play1">
                      暂无数据
                    </div>
                    <div class="audio-img" v-else>
                      <img :src="detailInfo.imageurl" />
                    </div>
                  </div>
                </div>
                <!--audio-->
                <div class="content-answer">
                  <h3 class="content-answer-title">
                    <img src="@/assets/composition/upload-star.png" />标准模型
                  </h3>
                  <div class="content-answer-main answer-text">
                    <div class="audio-img">
                      <span v-html="Model"></span>
                    </div>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mark" v-if="isShow"></div>
    <BackTips title="是否退出？" :isBack="isBack" @close="handleClosed" :courseId="toNumber(userid)" />
    <div class="yxp-upload-code" v-if="isShow">
      <img src="" class="code" />
    </div>
  </div>
</template>
<script>
import { Slider } from "ant-design-vue"
import BackTips from '@/views/components/BackTips.vue'
import { Howl } from "howler"
import {toNumber} from "lodash/lang";
import {mmssFilter} from "../../../../utils/vue-filter";
import {userCourseOver} from "@/api/reverse";
import {storage} from "@/utils/storage";
// import{ reportDetail } from '@/services/composition.js'
export default {
  name: 'uploadResult',
  components: {
    ASlider: Slider,
    BackTips
  },
  data () {
    return {
      title: '英语习得与切片训练',
      modelArr: ['要点解读','查看模型'],
      content:'',
      model: -1,
      id: 0,
      course_type: 0,
      courseId: 0,
      type: 1,
      enText: [],
      iNow: -1,
      iStep: -1,
      isShow: false,
      isOpen: false,
      isBack: false,
      isNext: false,
      popTitle: '开始全文还原训练吧~',
      isEn: false,
      playing: false,
      defaultPlaying: false,
      project_voice: '',
      detailInfo: {},
      voice: '',
      Model: '',
      rightVoice: '',
      ModeInfo: '',
      sentence: [],
      articleType: 0,
      seekTimer: null,
      seekTimer1: null,
      seekDuration: 0,
      seekDuration1: 0,
      audioDuration: 0,
      audioDuration1: 0,
      personVoice: false,
      defaultVoice: false,
      modal: 0,
      userid: 0,
      packageId: 0,
      num: 0,
    }
  },
  computed: {
    sliderPercentage: function() {
      return this.seekDuration < 1 ? 0 : Math.ceil((this.seekDuration / this.audioDuration) * 93)+7;
    },
    sliderPercentage1: function() {
      return this.seekDuration1 < 1 ? 0 : Math.ceil((this.seekDuration1 / this.audioDuration1) * 93)+7;
    }
  },
  created () {
    if (this.$route.query) {
      let { userId, courseId, packageId,num } = this.$route.query
      this.userid = userId
      this.courseId = courseId
      this.packageId = packageId
      this.num = num
    }
    this.getDetail()
  },
  methods: {
    mmssFilter,
    toNumber,
    getDetail () {
      // this.ModeInfo = storage.get("ModeListInfo");
      // console.log(this.ModeInfo)
      this.ModeInfo = storage.get("ModeListInfo");
      console.log(this.ModeInfo)
      let pas ={
        userId: this.userid,
        courseId: this.courseId,
        packageId: this.packageId,
        num: this.num
      }
      userCourseOver(pas).then((res)=>{
        this.detailInfo = res.data
        console.log(this.detailInfo)
        this.Model = this.detailInfo.conentEn
      })
      // reportDetail({ id: this.id }).then(data => {
      let data = {"status":"success","code":1,"data":{"date":"2024-12-13 11:12:52","essay_id":585,"pic":"","voice":"https:\/\/777-video.oss-cn-beijing.aliyuncs.com\/composition\/m\/sen_en\/9653d04bd537e8011918de767c02964e0b2bb06991720afe8f12fb48f8b0c3c4.wav","score":"0,0,0","sentence":["Dear Allen,","&&How is everything going?","I'm glad to tell you","that our school will hold a music festival next Sunday morning in the school hall.","And I'm writing to invite you to join us.##","&&The opening ceremony will start at 9:00 am,","and the schoolmaster will deliver a speech in the ceremony.","Then there will be various fantastic performances played by talented students,","and I think you will like them very much.","You are definitely welcome to show up on stage,","which will add color and fun to our festival.##","&&I'm looking forward to your early reply as early as possible.##","&&Best wishes!##","Yours,##Li Hua"],"student_name":"小旭","teacher":"","right_answer":{"voice":"https:\/\/777-video.oss-cn-beijing.aliyuncs.com\/composition\/m\/sen_en\/9653d04bd537e8011918de767c02964e0b2bb06991720afe8f12fb48f8b0c3c4.wav","essay":"<p>Dear Allen,&nbsp;<\/p><p>&nbsp; &nbsp; How is everything going? I'm glad to tell you that our school will hold a music festival next Sunday morning in the school hall. And I'm writing to invite you to join us.&nbsp;<\/p><p>&nbsp; &nbsp;The opening ceremony will start at 9:00 am, and the schoolmaster will deliver a speech in the ceremony. Then there will be various fantastic performances played by talented students, and I think you will like them very much. You are definitely welcome to show up on stage, which will add color and fun to our festival.&nbsp;<\/p><p>&nbsp; &nbsp; I'm looking forward to your early reply as early as possible.&nbsp;<\/p><p>&nbsp; &nbsp; Best wishes!&nbsp;<\/p><p style=\"text-align: right; \">Yours,&nbsp;<\/p><p style=\"text-align: right; \">Li Hua<\/p>","require":"<p>&nbsp; &nbsp; 假定你是李华，你校将举办音乐节。请写封邮件邀请你的英国朋友Allen参加，<\/p><p>内容包括：&nbsp;<\/p><p>&nbsp; &nbsp; 1. 时间；&nbsp;<\/p><p>&nbsp; &nbsp; 2. 活动安排；&nbsp;<\/p><p>&nbsp; &nbsp; 3. 欢迎他表演节目。&nbsp;<\/p><p>注意：<\/p><p>&nbsp; &nbsp; 1. 词数100左右；&nbsp;<\/p><p>&nbsp; &nbsp; 2. 可以适当增加细节，以使行文连贯。<\/p>","type":33,"phrase":[{"word":"the school hall","translate":"学校礼堂"},{"word":"opening ceremony","translate":"开幕式"},{"word":"various","translate":"各种"},{"word":"fantastic","translate":"奇特的"},{"word":"performance","translate":"表演"}],"sentence":[{"word":"I’m glad to tell you that our school will hold a music festival next Sunday morning in the school hall.","translate":"我很高兴的告诉你我们学校下个星期天上午将在学校礼堂举办音乐节。"},{"word":"Then there will be various fantastic performances played by talented students, and I think you will like them very much.","translate":"然后会有富有天赋的学生们进行的各类精彩表演，我想你会非常喜欢它们的。"},{"word":"You are definitely welcome to show up on stage, which will add color and fun to our festival.","translate":"非常欢迎你上台表演，这将给我们的节日增乐添彩。"}]},"require":"<p>&nbsp; &nbsp; 假定你是李华，你校将举办音乐节。请写封邮件邀请你的英国朋友Allen参加，<\/p><p>内容包括：&nbsp;<\/p><p>&nbsp; &nbsp; 1. 时间；&nbsp;<\/p><p>&nbsp; &nbsp; 2. 活动安排；&nbsp;<\/p><p>&nbsp; &nbsp; 3. 欢迎他表演节目。&nbsp;<\/p><p>注意：<\/p><p>&nbsp; &nbsp; 1. 词数100左右；&nbsp;<\/p><p>&nbsp; &nbsp; 2. 可以适当增加细节，以使行文连贯。<\/p>","type":1},"info":"操作成功"};
        if (data.code === 1 && data.data) {
          // this.detailInfo = data.data
            // console.log('this.voice------', data)
          this.voice = data.data.voice
          this.rightVoice = data.data.right_answer.voice
          this.sentence = data.data.sentence
          this.articleType = data.data.type
          let enText = this.sentence
          let enArr = []
          let vm = this;

          this.audio = new Howl({
            src: this.voice,
            html5: true,
            onplay: function() {
              vm.playing = true;
              vm.seekTimer = setInterval(() => {
                vm.audioDuration = this.duration();
                vm.seekDuration = this.seek();
              }, 1000);
            },
            onload: function() {
              vm.audioDuration = this.duration();
            },
            onpause: function() {
              vm.playing = false;
              vm.personVoice = false
            },
            onend: function() {
              console.log("end");
              vm.playing = false;
              vm.personVoice = false
              vm.defaultVoice = false
              clearInterval(vm.seekTimer)
            }
          });
          this.audio1 = new Howl({
            src: this.rightVoice,
            html5: true,
            onplay: function() {
              vm.defaultPlaying = true;
              vm.seekTimer1 = setInterval(() => {
                vm.audioDuration1 = this.duration();
                vm.seekDuration1 = this.seek();
              }, 1000);
            },
            onload: function() {
              vm.audioDuration1 = this.duration();
            },
            onpause: function() {
              vm.defaultPlaying = false;
              vm.defaultVoice = false;
            },
            onend: function() {
              console.log("ends");
              vm.defaultPlaying = false;
              vm.defaultVoice = false
              clearInterval(vm.seekTimer1)
            }
          });
          if (this.articleType === 1 || this.articleType === 5 || this.articleType === 2) {
            this.enHead = enText.splice(0,1).join('').replace('##','')
            this.enEnd = enText.pop()
            if (this.enEnd.indexOf('##')) {
              this.enEnd = this.enEnd.replace('##','<br/>')
            }
          } else if (this.articleType === 3 || this.articleType === 4) {
            this.enHead = enText.splice(0,1).join('').replace('##','')
          }
          enText.map(item =>{
            if (item.indexOf('&&') !== -1 || item.indexOf('##') !== -1) {
              let val = item.replace('&&', '&nbsp;&nbsp;&nbsp;&nbsp;').replace('##','<br>')
              enArr.push(val)
            } else {
              enArr.push(item)
            }

          })
          this.enText = enArr
        }
      // })
    },
    // 播放语音
    handlePlay (type) {
      if (type === 1) {

        if (this.voice) {
          this.defaultVoice = false
          this.defaultPlaying = false
          this.playing = true
          this.personVoice = true
          if (this.audio1) {
            this.audio1.pause()
          }
          this.audio.play()
        }else {
          console.log('没有可播放的音频')
        }


      } else {
        if (this.rightVoice !== '') {
          this.defaultVoice = true
          this.defaultPlaying = true
          this.playing = false
          this.personVoice = false
          if (this.audio) {
            this.audio.pause()
          }
          this.audio1.play()
        }
      }
    },
    handlePause (type) {
     if (type === 1) {
       this.audio.pause()
     } else {
       this.audio1.pause()
     }
    },
    handleBack () {
      this.isBack = true
    },
    handleClosed (val) {
      this.isBack = val
    }
  }
}
</script>
<style  scoped>
.yxp-composition-top {
  position: relative;
  display: flex;
  height: 80px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  background: #fff;
  padding: 0 40px;
  .back{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 30px;
    height: 27px;
    span{
      display: block;
      width: 30px;
      height: 27px;
      background: url() no-repeat;
      background-size: 100%;
      cursor: pointer;
    }
  }
  .yxp-top-c{
    width: 100%;
    font-size: 20px;
    flex: 1;
    font-weight: 700;
  }
  .yxp-top-r {
    color: #27bfa3;
    font-size: 20px;
    font-weight: 400;
    .right-text-item {
      cursor: pointer;
      &:last-child {
        margin-left: 60px;
      }
    }
  }
}
.yxp-course{
  width: 100%;
  overflow: hidden;
  background: #F0F2F4;
  height: 100%;
}
.main-box{
  position: relative;
  display: flex;
  margin-top: 30px;
  justify-content: center;
  width: inherit;
}
.main-box-content{
  position: relative;
  width: 530px;
  height: 540px;
  overflow-y: auto;
  background: #fff;
  border-radius: 10px;
  padding: 30px;
  font-size: 20px;
}
::-webkit-scrollbar {
  display: none;
}
.main-box-content:first-child{
  margin-right: 20px !important;
}
.yxp-scene-main .main-box-content .content .upload-box .work-title {
  padding-top: 2px !important;
}
.yxp-scene-main .main-box-content .content-user {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid #D9DFE5;
  border-radius: 6px;
  padding: 21px 0;
}
.yxp-scene-main .main-box-content .content-user-item {
  display: flex;
  align-items: center;
  margin: 2px 20px;
  font-size: 16px;
  font-weight: 400;
  color: #333;
}
.yxp-scene-main .main-box-content .content-user-item img {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}
.yxp-scene-main .main-box-content .content-user-item .student {
  width: 13px;
  height: 16px;
  margin: 0 5px 0 2px;
}
.yxp-scene-main .main-box-content .content-user-item .date {
  width: 18px;
  height: 18px;
}
.yxp-scene-main .main-box-content .content-user-item .teach {
  width: 16px;
  height: 16px;
}
.yxp-scene-main .main-box-content .content-answer {
  margin-top: 32px;
}
.yxp-scene-main .main-box-content .content-answer-title {
  font-size: 30px;
  font-weight: bold;
  color: #333;
  text-align: center;
}
.yxp-scene-main .main-box-content .content-answer-title img {
  width: 29px;
  height: 36px;
  margin-right: 13px;
}
.yxp-scene-main .main-box-content .content-answer .answer-img {
  padding: 30px 0;
}
.yxp-scene-main .main-box-content .content-answer-main {
  background: #F0F7F6;
  border-radius: 10px;
  margin-top: 22px;
}
.yxp-scene-main .main-box-content .content-answer-main .audio-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #27BFA3;
  border: 1px solid #27BFA3;
  border-radius: 6px;
  margin: 0 auto;
  cursor: pointer;
}
.yxp-scene-main .main-box-content .content-answer-main .audio-btn:hover {
  background-color: #e9f9f6;
}
.yxp-scene-main .main-box-content .content-answer-main .audio-btn img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}
.yxp-scene-main .main-box-content .content-answer .answer-img .audio-img {
  text-align: center;
  padding: 0 72px 0 68px;
}
.yxp-scene-main .main-box-content .content-answer .answer-img .audio-img img {
  display: inline-block;
  width: 100%;
  height: auto;
  margin: 19px auto;
}
.yxp-scene-main .main-box-content .content-answer .answer-text {
  //padding-top: 10px;
  background: #fff;
}
.yxp-scene-main .main-box-content .content-answer .answer-text .audio-img {
  font-size: 20px;
  font-weight: 400;
  color: #333;
  margin-top: 20px;
}
.yxp-scene-main .main-box-content .content-answer .answer-text .audio-img img {
  width: 500px;
  height: 374px;
  margin: 19px auto 30px;
}
.yxp-scene-main .main-box-content .content-answer .answer-text .audio-img span {
  word-break: break-word;
}
.yxp-upload-code {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 663px;
  background: url(@/assets/composition/upload-code.png) no-repeat;
  background-size: 100% 100%;
  z-index: 1200;
}
.yxp-upload-code img {
  width: 400px;
  height: 400px;
  margin: 213px 50px 50px;
}
.yxp-upload-audio {
  position: fixed;
  bottom: 50px;
  display: flex;
  align-items: center;
}
.yxp-upload-audio .ms {
  font-size: 16px;
  font-weight: 400;
  color: #27BFA3;
}
.yxp-upload-audio .voice-range {
  margin: 0 10px;
}
@media screen and (max-width: 1200px) {
  .yxp-upload-audio {
    right: calc((100% - 950px) / 2);
    bottom: 20px;
  }
  .yxp-upload-audio .voice-range {
    width: 362px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1620px) {
  .yxp-upload-audio {
    right: calc((100% - 1180px) / 2);
    bottom: 20px;
  }
  .yxp-upload-audio .voice-range {
    width: 478px;
  }
}
@media screen and (min-width: 1620px) {
  .yxp-upload-audio {
    right: calc((100% - 1440px) / 2);
    bottom: 50px;
  }
  .yxp-upload-audio .voice-range {
    width: 600px;
  }
}

</style>